<template>
	<view class="center">
		<view class="topbar">
			<uv-icon name="setting-fill" color="primary" size="25" @click.capture="toSetting"></uv-icon>
		</view>
		<view class="user-info">
			<view class="user-info__avatar">
				<view class="user-info__avatar__display">
					<uni-id-pages-avatar width="160rpx" height="160rpx" />
				</view>
				<view class="user-info__avatar__gender" 
					v-if="userGender" :style="{ backgroundColor: userGender.color }">
					<uv-icon :name="userGender.icon" color="#ffffff" />
				</view>
			</view>
			<view class="user-info__detail uni-ml-10" @click.capture="toUserInfo">
				<uv-text :lines="1" bold size="20" :text="userName" />
				<uv-text :lines="1" size="10" type="info" :text="userDiscription" />
			</view>
			<view class="user-info__space">
				<uv-text type="info" suffix-icon="arrow-right" text="个人空间"></uv-text>
			</view>
		</view>
		<uv-grid :border="false" :col="4" class="post-stat uni-mt-8">
			<uv-grid-item v-for="(item,index) in userPostData" :key="index" 
				class="post-stat__item" @click.capture="item.action">
				<uv-text align="center" size="20" :text="item.count"></uv-text>
				<uv-text align="center" size="10" type="info" :text="item.text"></uv-text>
			</uv-grid-item>
		</uv-grid>
		<unicloud-db ref="petUdb" #default="{data}" collection="pet-pets" 
			where="owner_id == $cloudEnv_uid && visibility_status != 2" orderby="priority asc">
			<uv-scroll-list class="uni-mt-8" indicatorActiveColor="#e09ab5">
				<view class="pet-display" >
					<pet-card v-for="pet in data" :pet="pet" class="pet-display__item" @click.capture="toPetCenter"></pet-card>
					<view class="pet-display__extra" @click.capture="toPetManagement">
						<uv-text align="center" text="管理\n宠物"></uv-text>
					</view>
				</view>
			</uv-scroll-list>
		</unicloud-db>
		<view class="entries">
			<view v-for="(group, groupIndex) in entryGroups" :key="groupIndex">
				<uni-section class="entries__title uni-mt-4" :title="group.groupName" type="line" />
				<uv-grid :border="false" :col="4">
					<uv-grid-item v-for="(entry, index) in group.entries" :key="index"
						 class="entries__item" @click.capture="entry.action">
						<uv-icon :name="entry.icon" :size="26" color="primary"></uv-icon>
						<uv-text align="center" type="info" :text="entry.text"></uv-text>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref, nextTick } from 'vue'
	import { store } from '@/uni_modules/uni-id-pages/common/store.js'
	import { onShow } from '@dcloudio/uni-app'
	const userInfo = computed(() => {
		return store.userInfo
	})
	
	const petUdb = ref(null)
	onShow(() => {
		nextTick(() => {
			petUdb.value.refresh()
		});
	})

	const userName = computed(() => {
		return userInfo.value.nickname || 
			userInfo.value.username || 
			userInfo.value.mobile ||
			'未登录'
	})
	const userDiscription = computed(() => {
		return userInfo.value.description || '向别人介绍一下自己吧~'
	})
	const userGender = computed(() => {
		if (!userInfo.value.gender || userInfo.value.gender === 0) return null
		return userInfo.value.gender === 1 ? {
			icon: 'man',
			color: '#00aaff'
		} : {
			icon: 'woman',
			color: '#ffaaff'
		}
	})
	
	const toUserInfo = () => {
		uni.navigateTo({
			url: '/pages/user-center/user-info/user-info'
		})
	}
	const toSetting = () => {
		uni.navigateTo({
			url: '/pages/user-center/settings/settings'
		})
	}
	const toPetManagement = () => {
		uni.navigateTo({
			url: '/pages/user-center/pet-management/pet-management'
		})
	}
	const toPetCenter = () => {
		uni.navigateTo({
			url: '/pages/pet-center/pet-center'
		})
	}
	
	interface PostData {
		count: number,
		text: string,
		action?: () => {}
	}
	const userPostData = ref<PostData[]>([
		{
			count: 0,
			text: '获赞',
		},
		{
			count: 0,
			text: '发布',
		},
		{
			count: 0,
			text: '关注',
		},
		{
			count: 0,
			text: '粉丝',
		},
	])
	
	
	interface EntryItem {
		icon: string,
		text: string,
		action?: () => {}
	}
	interface EntryGroup {
		groupName: string,
		entries: EntryItem[]
	}
	const entryGroups = ref<EntryGroup[]>([
		{
			groupName: '社区入口',
			entries: [
				{
					icon: 'bell',
					text: '消息',
				},
				{
					icon: 'edit-pen',
					text: '帖子',
				},
				{
					icon: 'star',
					text: '收藏',
				},
				{
					icon: 'empty-history',
					text: '浏览历史',
				},
			],
		},
		{
			groupName: '市集入口',
			entries: [
				{
					icon: 'shopping-cart',
					text: '购物车',
				},
				{
					icon: 'coupon',
					text: '订单',
				},
				{
					icon: 'car',
					text: '地址管理',
				},
			]
		},
	])
	
</script>

<style lang="scss" scoped>
	.center {
		flex: 1;
		flex-direction: column;
	}
	.topbar {
		padding-top: 50rpx;
		margin: 0 50rpx 0 50rpx;
		display: flex;
		flex-direction: row-reverse;
	}
	.user-info {
		margin: 50rpx 50rpx 0 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		&__avatar {
			min-width: 160rpx;
			height: 160rpx;
			&__display {
				overflow: hidden;
				border-radius: 100%;
			}
			&__gender {
				width: 40rpx;
				height: 40rpx;
				position: relative;
				left: 120rpx;
				top: -40rpx;
				border-radius: 100%;
				display: flex;
				justify-content: center;
			}
		}
		&__detail {
			width: 100%;
			display: flex;
			flex-direction: column;
		}
		&__space {
			min-width: 160rpx;
		}
	}
	.post-stat {
		margin-left: 50rpx;
		margin-right: 50rpx;
		padding: 20rpx 0 20rpx 0;
		border-radius: 20rpx;
		background-color: $uni-primary-light;
	}
	.pet-display {
		padding: 0 40rpx 0 40rpx;
		display: flex;
		flex-direction: row;
		&__item {
			margin-left: 10rpx;
			margin-right: 10rpx;
			width: 600rpx;
			height: 200rpx;
			z-index: 100;
		}
		&__extra {
			margin-left: 10rpx;
			margin-right: 10rpx;
			width: 120rpx;
			height: 200rpx;
			border-radius: 20rpx;
			background-color: $uni-color-primary;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 200;
		}
	}
	.entries {
		margin-left: 50rpx;
		margin-right: 50rpx;
	}
	.info-card {
		background-color: $uni-white;
		position: absolute;
		margin-top: 30rpx;
		border-radius: 50rpx;
		top: 25%;
		height: 75%;
		width: 100%;
		z-index: -9999;
	}
</style>
